<template>
	<div class="keypoint">
		<!-- 树形结构 -->
		<div class="keypoint-tree">
			<span>组织树</span>
			<el-tree
				:data="treeInfo"
				default-expand-all
				ref="orgTree"
				node-key="id"
				:props="defaultProps"
				@node-click="treeNodeClick"
			></el-tree>
		</div>
		<!-- 内容展示 -->
		<div class="keypoint-show">
			<!-- 工具栏 -->
			<div class="keypoint-show__toolbar">
				<div class="select">
					<el-select placeholder="请选择"></el-select>
				</div>
				<div class="tabs">
					<div class="tabs-wrapper">
						<span :class="active ? 'active' : ''" @click="active = true">单位资料</span>
						<span :class="active ? '' : 'active'" @click="active = false">专职消防队</span>
					</div>
				</div>
			</div>
			<!-- 内容 -->
			<div class="keypoint-show__content">
				<div v-show="active">
					<Unitinfo />
				</div>
				<div v-show="!active">
					<Profession />
				</div>
			</div>
		</div>
	</div>
</template>
 
<script>
import Unitinfo from '@/pages/keypoint/views/unitinfo';
import Profession from '@/pages/keypoint/views/profession';

export default {
	name: 'Keypoint',
	components: {
		Unitinfo,
		Profession
	},
	data() {
		return {
			active: 'active',
			activeName: '0',
			treeInfo: [] /* 树 */,
			select_company: [] /* 状态下拉 */,
			rules: {} /* 校验规则 */,
			defaultProps: {} /* 树形节点名 */
		};
	},
	created() {
		this.init();
	},
	methods: {
		// 初始化
		init() {},

		// 树形结构的点击
		treeNodeClick() {}
	}
};
</script>
 
<style lang="scss">
.keypoint {
	padding: 20px;
	font-size: 14px;
	display: flex;
	height: calc(100vh - 40px);

	.keypoint-tree {
		min-width: 300px;
		border-radius: 3px;
		overflow: hidden;
		border: 1px solid #eee;
		box-shadow: $--xy-shadow-deep;

		& > span {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			padding: 15px 0;
			background-color: rgb(0, 166, 217);
			color: #fff;
		}
	}

	.keypoint-show {
		flex: 1;
		margin-left: 20px;
		border-radius: 3px;
		overflow: hidden;
		// border: 1px solid #eee;
		// box-shadow: $--xy-shadow-deep;

		&__toolbar {
			height: 50px;
			display: flex;
			align-items: center;

			.tabs {
				height: 100%;
				margin-left: 20px;
				flex: 1;
				height: 39px;
				border-bottom: 1px solid #eee;

				.tabs-wrapper {
					display: flex;
					width: 100%;
					height: 100%;
				}

				span {
					display: inline-block;
					height: 100%;
					width: 120px;
					cursor: pointer;
					@include xy-dfc;
					@include xy-stopSelect;

					&:hover {
						color: rgb(0, 174, 255);
					}

					&.active {
						background-color: rgb(0, 174, 255);
						color: #fff;
						border-bottom: 1px solid rgb(2, 111, 244);
					}
				}
			}
		}

		&__content {
			box-sizing: border-box;
			padding-top: 15px;
			height: calc(100vh - 90px);
		}
	}

	.el-tree {
		padding: 10px;
	}

	.el-tree-node.is-current > .el-tree-node__content {
		border: 1px solid #e2e2e2 !important;
		background-color: #f3f3f3;
		border-radius: 2px;
		box-shadow: 2px 3px 5px rgba(170, 170, 170, 0.3);
	}
}
</style>